<script>
export default {
    name: 'homeView',
    components: {},
    data() {
        return {}
    },
    methods: {
        goOrganizational() {
            this.$router.push('/organizational')
        },
        goUserList() {
            this.$router.push('/userList')
        },
        //兼容函数
        getNodeClassName(className) {
            var array = [];
            if (document.all) {
                var node = document.getElementsByClassName("*");
                for (var i = 0; i < node.length; i++) {
                    if (node[i].className == className) {
                        array.push(node[i]);
                    }
                }
            } else {
                array = document.getElementsByClassName(className);
            }
            return array;
        },

        //兼容函数
        getNode(obj) {
            var node = obj.nextSibling;
            if (node.nodeType == 3 && /^\s+$/.test(node.nodeValue)) {
                node = node.nextSibling;
            }
            return node;
        },

        //兼容函数
        getStyle(obj, attr) {
            return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
        },
        clickMenuFn(event) {
            const clickedElement = event.currentTarget;
            var node = this.getNode(clickedElement);
            var dis = this.getStyle(node, 'display');
            var index = Array.prototype.indexOf.call( this.getNodeClassName('nav_mode'), clickedElement);
            var icon =  this.getNodeClassName('nav_mode_title_icon')[index];
            if (dis == 'block') {
                node.style.display = 'none';
                icon.style.transform = 'rotate(0deg)';
            } else {
                node.style.display = 'block';
                icon.style.transform = 'rotate(180deg)';
            }


        }
    },
    created() {

    }
}
</script>

<template>
    <div class="homeView">
        <div class="navList">
            <div class="nav_mode" @click="clickMenuFn">
                <div class="nav_mode_title_text"> 一网通办 </div>
                <span class="nav_mode_title_icon iconfont icon-zhankai_heise"></span>
            </div>
            <div class="nav_mode_child">
                <div class="nav_mode_child_one">
                    <div class="nav_mode_child_one_icon">
                        <span class="iconfont icon-zaicichuli"></span>
                    </div>
                    <div class="nav_mode_child_one_title">
                        <div class="nav_mode_child_one_title_text">我的申请</div>
                    </div>
                </div>
                <div class="nav_mode_child_one">
                    <div class="nav_mode_child_one_icon">
                        <span class="iconfont icon-lishishuju"></span>
                    </div>
                    <div class="nav_mode_child_one_title">
                        <div class="nav_mode_child_one_title_text">待办已办</div>
                    </div>
                </div>
                <div class="nav_mode_child_one">
                    <div class="nav_mode_child_one_icon">
                        <span class="iconfont icon-dianzihuaziliao"></span>
                    </div>
                    <div class="nav_mode_child_one_title">
                        <div class="nav_mode_child_one_title_text">办结查询</div>
                    </div>
                </div>
            </div>
            <div class="nav_mode" @click="clickMenuFn">
                <div class="nav_mode_title_text"> 表单管理 </div>
                <span class="nav_mode_title_icon iconfont icon-zhankai_heise"></span>
            </div>
            <div class="nav_mode_child">
                <div class="nav_mode_child">
                    <div class="nav_mode_child_one">
                        <div class="nav_mode_child_one_icon">
                            <span class="iconfont icon-zaicichuli"></span>
                        </div>
                        <div class="nav_mode_child_one_title">
                            <div class="nav_mode_child_one_title_text">模板空间</div>
                            <div class="nav_mode_child_one_title_tips ">表单的模板管理</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="nav_mode" @click="clickMenuFn">
                <div class="nav_mode_title_text"> 流程管理 </div>
                <span class="nav_mode_title_icon iconfont icon-zhankai_heise"></span>
            </div>
            <div class="nav_mode_child">
                <div class="nav_mode_child">
                    <div class="nav_mode_child_one">
                        <div class="nav_mode_child_one_icon">
                            <span class="iconfont icon-zaicichuli"></span>
                        </div>
                        <div class="nav_mode_child_one_title">
                            <div class="nav_mode_child_one_title_text">流程配置</div>
                        </div>
                    </div>
                    <div class="nav_mode_child_one">
                        <div class="nav_mode_child_one_icon">
                            <span class="iconfont icon-lishishuju"></span>
                        </div>
                        <div class="nav_mode_child_one_title">
                            <div class="nav_mode_child_one_title_text">表单绑定</div>
                            <div class="nav_mode_child_one_title_tips">确定流程所对应的表单</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="nav_mode" @click="clickMenuFn">
                <div class="nav_mode_title_text"> 系统管理 </div>
                <span class="nav_mode_title_icon iconfont icon-zhankai_heise"></span>
            </div>
            <div class="nav_mode_child">
                <div class="nav_mode_child">
                    <div class="nav_mode_child_one" @click="goUserList()">
                        <div class="nav_mode_child_one_icon">
                            <span class="iconfont icon-lishishuju"></span>
                        </div>
                        <div class="nav_mode_child_one_title">
                            <div class="nav_mode_child_one_title_text">我的单位</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="routerView">
            <router-view></router-view>
        </div>
    </div>
</template>

<style scoped lang="scss">
.homeView {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;


    .navList {
        width: 250px;
        height: 100%;
        overflow: auto;
        box-sizing: border-box;
        padding: 20px 10px;
        background: #FFFFFF;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .navList .nav_mode {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        padding: 14px 10px;
        /* border: 1px solid #95bee7; */
        /* background:#f3f3f3; */
        margin-bottom: 0px;
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        align-items: center;
    }

    .navList .nav_mode:hover {
        background-color: #2C8EEF;
        color: #fff;
        cursor: pointer;
    }

    .navList .nav_mode .nav_mode_title_text {

        width: calc(100% - 30px);
        flex-basis: calc(100% - 30px);
        flex-shrink: 0;
    }

    .navList .nav_mode .nav_mode_title_icon {
        width: 30px;
        text-align: center;
    }

    .navList .nav_mode .nav_mode_title {
        width: 100%;
        height: auto;
        font-size: 16px;
        margin-bottom: 10px;
        box-sizing: border-box;
        padding-bottom: 6px;
        border-bottom: 1px solid #4E81B4;
    }

    .navList .nav_mode_child {
        width: 100%;
        height: auto;
        box-sizing: border-box;
    }

    .navList .nav_mode_child .nav_mode_child_one {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        padding: 10px;
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        align-items: center;
    }

    .navList .nav_mode_child .nav_mode_child_one:hover {
        background-color: #2C8EEF;
        color: #fff;
        cursor: pointer;
    }

    .navList .nav_mode_child .nav_mode_child_one .nav_mode_child_one_icon {

        width: 40px;
        height: auto;
        font-size: 20px;
        color: #335A82;
    }

    .navList .nav_mode_child .nav_mode_child_one .nav_mode_child_one_title {

        width: calc(100% - 40px);
        flex-basis: calc(100% - 40px);
        flex-shrink: 0;
    }

    .navList .nav_mode_child .nav_mode_child_one .nav_mode_child_one_title .nav_mode_child_one_title_text {
        width: 100%;
        height: auto;
        /* font-size: 18px; */
    }

    .navList .nav_mode_child .nav_mode_child_one .nav_mode_child_one_title .nav_mode_child_one_title_tips {
        width: 100%;
        height: auto;
        font-size: 14px;
        color: #888787;
        margin-top: 5px;
    }


    .routerView {
        width: calc(100% - 250px);
        height: 100%;
        box-sizing: border-box;
        padding: 10px;
    }

    .routerView {
        width: calc(100% - 250px);
        height: 100%;
        box-sizing: border-box;
        padding: 10px;
    }
}
</style>
